import React, { useRef, useState, useMemo } from 'react';
import { Button, Tabs, Card, Col, Row, Switch, Tag, Input, message } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
import { changeactiveKey, delshoplist, updateshoplist, addtypelist, deltypelist } from '../../store/reducer';

const Typelist = () => {

  //获取数据 
  let obj = useSelector(state => state.crms1)
  let dispatch = useDispatch()

  //筛选出对应的系列
  let newlist = useMemo(() => {
    return obj.shoplist.filter(item => {
      return item.typeId == obj.activeKey
    })
  }, [obj.shoplist, obj.activeKey])

  //定义添加的状态
  let [title, setTitle] = useState('')

  //高亮
  const onChange = key => {
    dispatch(changeactiveKey(key))
  };
  //添加
  const add = () => {
    let t = new Date().getTime()
    if (!title) {
      message.open({
        type: 'warning',
        content: '内容不能为空',
      });
      return
    }
    let obj = {
      "id": t,
      "key": t,
      "typeId": t,
      "label": title
    }
    dispatch(addtypelist(obj))
    setTitle('')

  };
  //删除
  const remove = targetKey => {

    //当导航中卡片时 禁止删除并提示
    let index = obj.shoplist.some(item => {
      return item.typeId == targetKey
    })
    if (index) {
        message.open({
          type: 'warning',
          content: '导航中有数据,不能删除',
        });
      } else {
    //删除的方法
    dispatch(deltypelist(targetKey))
      }
  };
  const onEdit = (targetKey, action) => {
    if (action === 'add') {
      add();
    } else {
      remove(targetKey);
    }
  };
  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Input style={{ width: '300px', marginRight: '10px' }} value={title} onChange={(e) => {
          setTitle(e.target.value)
        }} />
        <Button onClick={add} type='primary'>添加</Button>
      </div>
      <Tabs
        hideAdd
        onChange={onChange}
        activeKey={obj.activeKey}
        type="editable-card"
        onEdit={onEdit}
        items={obj.typelist}
      />

      {/* 卡片组件 */}
      <div>
        <Row gutter={16}>
          {
            newlist.map(item => {
              return (
                <Col span={8} key={item.id} style={{ marginBottom: '20px' }}>
                  <Card title={item.title} variant="borderless" extra={<span onClick={() => {
                    //删除商品卡片的方法
                    dispatch(delshoplist(item.id))
                  }}>删除</span>}>
                    <div>
                      <p>商品价格:{item.price}</p><br />
                      <p> 商品状态:<Switch checked={item.Collect} onChange={() => {
                        //修改商品卡片的方法
                        let obj = {
                          ...item,
                          Collect: !item.Collect
                        }
                        dispatch(updateshoplist(obj))
                      }} /></p><br />
                      <p>商品规格:{item.specification.map(ele => {
                        return <Tag key={ele} color='green'>{ele}</Tag>
                      })}</p>
                    </div>
                  </Card>
                </Col>
              )
            })
          }
        </Row>
      </div>
    </div>
  );
};
export default Typelist;